<template>
    <h1>搜索</h1>
    <div class="row">
        <template v-if="success">
            <a-card v-for="g in goodsList" hoverable style="width: 300px" class="float-left">
                <template #cover>
                    <img :src="g.picture"/>
                </template>
                <a-card-meta :title="g.title" :description="'价格：'+g.price+'元'"></a-card-meta>
            </a-card>

        </template>
        <template v-else>
            <a-result status="500" title="500" sub-title="对不起，服务器正在开小差.">
                <template #extra></template>
            </a-result>
        </template>
    </div>
</template>

<script>
import axios from "axios";
import {} from 'ant-design-vue'

export default {
    name: "Search",
    data() {
        return {
            success: true,
            titleWather:null,
            goodsList: []
        }
    },
    mounted() {
        // 首次获取参数 不用(能)从vuex中拿值
        const params = this.$route.query
        const title = params.title;
        // 如果担心有问题 可以判断
        if (this.$store.state.goodsSearchTitle != title) {
            this.$store.commit('changeSearchTitle', title)
        }
        this.search(title)
        this.titleWather = this.$store.watch(state=>state.goodsSearchTitle,(newTitle)=>{
            this.search(newTitle)
        })
    },
    unmounted() {
        // 停止监视
        this.titleWather && this.titleWather()
    },
    methods: {
        search(title) {
            axios.get('http://localhost:8011/goods/search?title=' + title).then(resp => {
                console.log(resp)
                if (resp.status != 200) {
                    this.success = false
                } else {
                    this.goodsList = resp.data.content
                }
            }).catch(e => console.log(e))
        }
    }
}
</script>

<style scoped>

</style>